<!-- input www.bootstrapmb.com-->
<template>
  <view class="input-block">
    <input class="input" type="text" :disabled="disabled" :style="pWidth" :class="focus == true ? 'focus' : ''"   
    :focus="focus" @focus='focusM' @blur='blurM' :value="value" @input='inputM' :name="name">
    <text class="placeholder" :class="(isFocus == true|| (focus == true)) ? 'focus' : ''" v-text="placeholder">
        
    </text>
    <!-- <text>{{isFocus}}</text> -->
  </view>
</template>

<script>
export default {
  name:"aqieInput",
  props: {
    name:String,
    placeholder: String,
    method: String,
    value: String|Number,
    width: {
      type: String,
      default: '350'
    },
    height:{
      type:String,
      default: '33'
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  data () {
    return {
      focus:false,
      newValue:''
    };
  },

  components: {},
  watch:{
    value(val){
      this.newValue = val
    }
  },
  computed: {
    isFocus(){
      if(this.newValue){
        this.focus = true
        return true
      }
      return false
    },
    pWidth(e) {
      // console.log(e, `width:${this.width}rpx;height:${this.height}rpx`)
      return `width:${this.width}rpx;height:${this.height}rpx`
    }
  },

  mounted() {
    
  },
  methods: {
    focusM(){
      this.focus = true
      // console.log('focus', this.focus)
    },
    blurM(){
      this.focus = false
    },
    inputM(e){
      // 子组件不修改, 使用newValue 接收新值 并传到父组件
      this.newValue = e.detail.value  
      if(this.method){
        this.$emit(this.method, this.newValue)
      }
      
    }
  }
}

</script>
<style lang='scss' scoped>
.input-block {
  position: relative;
  .input{
    font-weight: 500;
    font-size: 24rpx;
    color: #495055;
    padding: 15rpx 15rpx;
    border-radius: 16rpx;
    border: 2rpx solid  #D9D9D9;
    outline:none;
  }
  .placeholder {
    position: absolute;
    margin: 30rpx 0;
    padding: 0 10rpx;
    font-family: Roboto, sans-serif;
    color:  #6c757d;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    top: 0;
    left: 17rpx;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    background: none;
    pointer-events: none;
  }
  .placeholder.focus {
    transform: scale(0.8) translate(10rpx, -45rpx);
    background: #fff;
    color: #284B63;
  }
  .input.focus {
    color: #284B63;
    border-color: #284B63;
  }

}
</style>